<template>
  <div id="about">
    <el-row type="flex" justify="center">
      <el-col :span="24" style="background:white; padding-left:40px; min-height:300px">
        <h5 class="title">
          <!-- <i class="el-icon-star-on"></i> -->
          <div v-html="content" class="content"></div>
        </h5>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getArticle } from '@/api/apis'

export default {
  name: 'about',
  data() {
    return {
      content: '建设中',
    }
  },
  mounted() {
    this.getArticle()
  },
  methods: {
    submitForm() {},
    getArticle() {
      getArticle({
        atcId: 0,
        flag: 1,
      }).then(({data}) => {
        if(data) {
        this.content = data.content
        }
      })
    },
  },
}
</script>

<style scoped>
.dl-blog dd {
  margin-left: 30px;
}

.dl-blog .icon {
  width: 20px;
  height: 20px;
}

.title {
  margin-top: 40px;
}

.statement {
  border-left: 3px solid #f56c6c;
  padding: 20px;
  background-color: #ebeef5;
  margin-top: 20px;
}

.content {
  font-weight: 400 !important;
  line-height: 1.8 !important;
  color: #363636 !important;
}

.content h1 {
  font-weight: 400 !important;
  line-height: 1.8 !important;
  font-size: 1.8em;
  border-left: 5px solid;
  padding-left: 10px;
  margin-bottom: 10px;
}

.content h2 {
  font-weight: 400 !important;
  line-height: 1.8 !important;
  font-size: 1.5em;
}

.content h3 {
  font-weight: 400 !important;
  line-height: 1.8 !important;
  font-size: 1.3em;
}

.content h4 {
  font-weight: 400 !important;
  line-height: 1.8 !important;
  font-size: 1.2em;
}
</style>